import * as React from "react";
import Model from '../Model/index';
import axios from '../../../../../../config/axios';
import {host} from '../../../../../../config/host';
import { Icon  } from "@blueprintjs/core";
import { connect } from "react-redux";
import './index.less';
import {AppToaster} from "../../../../../../component/Toast";

class Query extends React.PureComponent {
    constructor(props) {
        super(props);
        this.inputFocus = this.inputFocus.bind(this);
        this.inputChange = this.inputChange.bind(this);
        this.inputEnter = this.inputEnter.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
        this.handleClear = this.handleClear.bind(this);
        document.onkeydown = this.inputEnter.bind(this);
        this.state = {
            sure: false,
            userId: "",
            showModel: false,
            initData: {}
        }
    }

    componentDidMount() {}
    componentWillUnmount() {
        document.onkeydown = null;
    }

    inputFocus(flag) {
        this.setState({
            sure: flag,
        })
    }
    async inputEnter(e) {
        if (!e) {
            e = window.event
        }
        if ((e.keyCode || e.which) === 13) {
            try {

                const {userId} = this.state;
                if (userId === "") {
                    this.setState({
                        showModel: false
                    });
                    return;
                }
                const msg = await axios.get(host + "user" + "?UserId=" + userId);

                if (msg.data.statusCode === 1){
                    if(msg.data.statusMsg === "") {
                        this.setState({
                            showModel: false,
                            initData: {}
                        })
                    }
                    const data = JSON.parse(msg.data.statusMsg);

                    const { userId, org, role, add, edit} = data;
                    const deleteData = data.delete;
                    const initData = {
                        UserId:userId, Password: "", Role:role,
                        Add:add, Edit:edit, Delete:deleteData,
                    };
                    this.setState({
                        showModel: true,
                        initData
                    })
                }
            } catch (e) {
                console.log(e)
            }
        }
    }

    inputChange(e) {
        this.setState({
            userId: e.target.value
        })
    }

    async handleEdit() {
        const model= this.refs.model;
        const {userReduce} = this.props;
        const {org} = userReduce;
        const data = Object.assign({}, model.getValue(), {Org: org});
        try {
            await axios.post(host + "user/delete", {UserId: data.UserId});
            const msg = await axios.post(host + "user/create", data);
            if (msg.data.statusCode === 0) {
                AppToaster.show({ message: msg.data.statusInfo });
            } else {
                AppToaster.show({ message: "修改成功" });
                this.handleClear();
            }
        } catch (e) {
            console.log(e)
            AppToaster.show({ message: "发生错误" });
        }
    }

    async handleDelete() {
        const model= this.refs.model;
        const data = model.getValue();
        try {
            const msg = await axios.post(host + "user/delete", {UserId: data.UserId});
            if (msg.data.statusCode === 0) {
                AppToaster.show({ message: msg.data.statusInfo });
            } else {
                AppToaster.show({ message: "删除成功" });
                this.setState({
                    showModel: false
                });
            }
        } catch (e) {
            console.log(e)
            AppToaster.show({ message: "发生错误" });
        }
    }

    handleClear() {
        this.setState({
            showModel: false,
            initData: {}
        })
    }

    render() {
        const {showModel, initData} = this.state;
        return(
            <div className="query">
                <div className="bp3-input-group .modifier query-search">
                    <input onFocus={()=>this.inputFocus(true)} onBlur={()=>this.inputFocus(false)} type="text" className="bp3-input"  placeholder="用户Id" onChange={this.inputChange}/>
                    <Icon icon={"search"} iconSize={17} intent={""} />
                </div>
                {!!showModel &&  <div>
                    <div className="query-title">用户</div>
                    <Model type="edit" ref="model" initData={initData}/>
                    <a role="button" className="bp3-button .modifier query-btn" onClick={this.handleEdit}>修改</a>
                    <a role="button" className="bp3-button .modifier query-btn" onClick={this.handleDelete}>删除</a>
                    <a role="button" className="bp3-button .modifier query-btn" onClick={this.handleClear}>取消</a>
                </div>}
            </div>
        )
    }
}

const mapStateToProps = ({ userReduce }) => ({ userReduce});
export default connect(mapStateToProps)(Query);